<template>
  <div class="container">
    <el-table
      :row-class-name="xxxTableRowClassName"
      v-loading="isLoading"
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{
        background: 'rgba(61,157,255,0.05)',
        color: '#333333',
      }"
    >
      <el-table-column
        prop="name"
        label="赛事名称"
        width="width"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="projectName"
        label="子项目"
        width="width"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="startTime"
        label="启动时间"
        width="width"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="endTime"
        label="结束时间"
        width="width"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="status"
        label="当前状态"
        width="width"
        align="center"
      >
        <template slot-scope="scope">
          <span
            :style="{
              color:
                scope.row.status == 0
                  ? '#666'
                  : scope.row.status == 1
                  ? '#1890FF'
                  : '#FF1818',
            }"
          >
            {{
              scope.row.status == 0
                ? "未开始"
                : scope.row.status == 1
                ? "进行中"
                : "已结束"
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="赛制" width="width" align="center">
        <template slot-scope="scope">
          {{
            (scope.row.matchSocreType == 1 ? "积分赛" : "巅峰赛") +
            " - " +
            (scope.row.type == 1 ? "个人赛" : "班级赛")
          }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="width" align="center">
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            size="small"
            plain
            @click="compile($event, row)"
            >查看成绩</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination-page @size="changeSize" @page="changePage" :total="total" />
    <el-dialog title="查看成绩" :visible.sync="dialogVisible" width="600">
      <div class="tabledialog">
        <div style="margin-right: 8px">
          <span style="font-weight: 600">赛事名称:</span>{{ name }}
        </div>

        <div style="margin-right: 8px">
          <span style="font-weight: 600">赛事类型:</span>
          {{
            (matchSocreType == 1 ? "积分赛" : "巅峰赛") +
            " - " +
            (type == 1 ? "个人赛" : "班级赛")
          }}
          <!-- {{ type == 1 ? "个人赛" : "班级赛" }} -->
        </div>
        <el-input
          type="text"
          prefix-icon="el-icon-search"
          v-model="kb_content"
          placeholder="请输入搜索内容"
          clearable
          class="inputa"
          style="width: 200px; cursor: pointer; height: 40px"
          @change="getmatchDeatails()"
        ></el-input>
      </div>
      <el-table :data="tableDatason" v-loading="isLoadingSon">
        <el-table-column
          align="center"
          :label="type == 2 ? '班级名称' : '姓名'"
        >
          <template slot-scope="scope">
            <span v-if="type == '1'">{{ scope.row.stuName }}</span>
            <span v-else>{{ scope.row.stuName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="type == '2'"
          align="center"
          property="stuId"
          label="参赛人数"
        ></el-table-column>
        <el-table-column
          align="center"
          property="score"
          label="成绩"
        ></el-table-column>
        <el-table-column
          align="center"
          property="stuRank"
          label="当前排名"
        ></el-table-column>
        <el-table-column align="center" label="状态" width="width">
          <span
            :style="{
              color:
                this.status == 0
                  ? '#666'
                  : this.status == 1
                  ? '#1890FF'
                  : '#FF1818',
            }"
          >
            {{
              this.status == 0
                ? "未开始"
                : this.status == 1
                ? "进行中"
                : "已结束"
            }}
          </span>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { matchResult, matchDetails } from "@/api/achievement/index.js";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      options: [],
      visible: false,
      select: "",
      disable: false,
      total: -1,
      page: {
        pageSize: 10,
        pageNum: 1,
      },
      tableData: [1],
      tableDatason: [],
      isLoading: false,
      isLoadingSon: false,
      dialogVisible: false,
      search: "",
      selectSearch: "",
      copy: [],
      kb_content: "",
      name: null,
      type: null,
      matchSocreType: null,
      status: null,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getmatchResult();
  },
  methods: {
    compile(event, row) {
      this.dialogVisible = true;
      this.name = row.name;
      this.type = row.type;
      this.status = row.status;
      this.matchSocreType = row.matchSocreType;
      this.id = row.id;
      this.kb_content = "";
      this.getmatchDeatails();
    },
    getmatchDeatails() {
      let data = {
        commonName: this.kb_content,
        matchId: this.id,
        matchtype: this.type,
      };
      this.isLoadingSon = true;
      matchDetails(data).then((res) => {
        if (res.code == 200) {
          this.tableDatason = res.result;
          this.isLoadingSon = false;
        }
      });
    },
    xxxTableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "statistics-warning-row";
      } else {
        return "";
      }
    },
    //列表
    getmatchResult() {
      let data = {
        schoolId: this.$store.state.user.USER_INFO.pscShId,
        userId: this.$store.state.user.USER_INFO.id,
        ...this.page,
      };
      this.isLoading = true;
      matchResult(data).then((res) => {
        if (res.code == 200) {
          this.tableData = res.result;
          this.total = res.total;
          this.isLoading = false;
        }
      });
    },

    changeSize(size) {
      this.page.pageSize = size;
      this.getmatchResult();
    },
    changePage(page) {
      this.page.pageNum = page;
      this.getmatchResult();
    },
  },
};
</script>

<style scoped lang="scss">
.tabledialog {
  display: flex;
  justify-content: space-around;
  align-items: center;
  vertical-align: middle;
}
::v-deep .el-table__row.statistics-warning-row {
  background: rgba(61, 157, 255, 0.05);
}
::v-deep .el-form-item__label {
  padding-left: 60px;
}
::v-deep .el-input__inner {
  border-radius: 4px 0px 0px 4px;
}
::v-deep .el-button {
  border-radius: 0px 4px 4px 0px;
}
::v-deep .el-popover {
  border-radius: 30px;
}
</style>
